<template>
  <div class="personal-center-container">
    <div class="info-row">
      <img :src="avartar" />
      <div class='p_name'>
        <div>{{ userName }}</div>
      </div>
      <div class="p_info">
        <span>个人主页</span>
        <svg><use :xlink:href="icons.rightArrow"></use></svg>
      </div>
    </div>

    <div class="foot-row" @click="showFootDetail">
      <div data-foot-type="publish" class="foot-my-publish">
        <span>21</span>
        <span>头条</span>
      </div>
      <div data-foot-type="focus" class="foot-my-focus">
        <span>63</span>
        <span>关注</span>
      </div>
      <div data-foot-type="fans" class="foot-my-fans">
        <span>160</span>
        <span>粉丝</span>
      </div>
      <div data-foot-type="praised" class="foot-my-praised">
        <span>6231</span>
        <span>获赞</span>
      </div>
    </div>
  </div>
</template>

<script>
import Icons from "../../../assets/icons.svg";
export default {
  name: 'personal-page',
  data() {
    return {
      avartar: 'https://sf1-cdn-tos.toutiaostatic.com/img/tos-cn-i-0022/0a2922d7c6db4714a56eba2914a11aec~300x300.image',
      userName: '七弦抚尽',
      icons: {
        rightArrow: `${Icons}#rightArrow`
      }
    }
  },
  methods: {
    showFootDetail(e) {
      const type = e.target.getAttribute('data-foot-type');
      this.$router.push({ name:'/personal/myFoots', params: { type }} )
    }
  }
}
</script>
<style lang="less" scoped>
@import "~theme/flex.less";
.personal-center-container {
  width: 100%;
  height: 100%;
  padding: 0 0 15vw;
  background-color: rgba(194, 194, 194, .12);
}

.info-row {
  padding: 5vw 4.6875vw;
  width: 100%;
  #myFlex.rcs();
  position: relative;
  background-color: transparent;

  .p_info {
    position: absolute;
    height: 8vw;
    right: 4.6875vw;
    top: 50%;
    transform: translateY(-50%);
    #myFlex.rcs();

    span {
      font-size: 1.1rem;
      color: #999;
    }
    svg { 
      height: 4vw;
      width: 6vw;
      fill: #999; 
    }
  }

  & img {
    width: 16vw;
    height: 16vw;
    border-radius: 50%;
  }

  .p_name {
    #myFlex.rss();
    flex: 1;
    flex-direction: column;
    margin-left: 2vw;
    justify-content: space-around;

    & div {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .application {
      font-size: 0.85rem;
      width: 20vw;
      height: 5vw;
      background-color: #ec0000;
      border-radius: 5vw;
      color: #fff;
      text-align: center;
      line-height: 5.5vw;
    }
  }
}

.foot-row {
  width: 100%;
  display: flex;
  background-color: transparent;

  & div {
    width: 25%;
    height: 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    & span { pointer-events: none; }
    & span:first-child {
      font-size: 1.4rem;
      font-weight: bold;
    }
    & span:last-child {
      font-size: 1rem;
      color: #999;
    }
  }
}
</style>